<template>
  <div class="panel admin-panel">
    <div class="panel-head">
      <strong class="icon-reorder">管理员列表</strong>
    </div>

    <table class="table table-hover text-center">
      <tr>
        <th>序号</th>
        <th>账户</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      <tr v-for="(admin,index) in list.records" :key="admin.id">
        <td>{{admin.id}}</td>
        <td>{{admin.account}}</td>
        <td>{{admin.status|statusFilter}}</td>
        <td>
          <el-button
            v-if="admin.status==1"
            type="warning"
            size="medium"
            @click="update(index,true)"
          >禁用</el-button>

          <el-button v-else type="success" size="medium" @click="update(index,false)">恢复</el-button>

          <el-button type="danger" icon="el-icon-delete" size="medium" @click="del(index)" circle></el-button>
        </td>
      </tr>
    </table>

    <!-- 分页 -->
    <div class="shop-page">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper,sizes"
        :total="list.total"
        :current-page.sync="list.current"
        :page-count="list.pages"
        :page-size="list.size"
        :page-sizes="[3]"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "AdminList",
  data() {
    return {
      list: {
        records: [
          { id: 1, name: "111", password: "123456", status: "1" },
          { id: 2, name: "222", password: "123456", status: "1" },
          { id: 3, name: "333", password: "123456", status: "1" }
        ],
        total: 10, // 总数
        current: 1, // 当前页
        pages: 4, // 总页数
        size: 3 // pageSize
      }
    };
  },
  mounted() {
    this.getList(1);
  },
  methods: {
    // 修改状态
    update(index, forbidden) {
      axios
        .get(
          this.host +
            "/admin/update/" +
            this.list.records[index].id +
            "/" +
            forbidden
        )
        .then(r => {
          if (r.data.code == "200") {
            this.suc(r.data.message);
            this.list.records[index].status = forbidden ? "2" : "1";
          } else {
            this.error(r.data.message);
          }
        });
    },
    // 页码跳转
    handleCurrentChange(p) {
      this.getList(p);
    },
    // 获取页面
    getList(p) {
      axios.get(this.host + "/admin/list/" + p).then(r => {
        if (r.data.code == "200") {
          this.list = r.data.data;
        }else if(r.data.code=='403'){
          alert(r.data.code);
          location.href=this.host+'/admin/login';
        }else{
          this.error(r.data.message);
        }
      });
    },
    // 删除
    del(index) {
      // 弹窗确认
      this.$confirm("此操作将永久删除该管理员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let id = this.list.records[index].id;
        axios.get(this.host + "/admin/del/" + id).then(r => {
          if (r.data.code == "200") {
            this.suc(r.data.message);
            // 删除
            this.list.records.splice(index, 1);
          } else {
            this.error(r.data.message);
          }
        });
      });
    }
  },
  filters: {
    statusFilter(status) {
      if (status == "1") {
        return "正常";
      } else if (status == "2") {
        return "禁用";
      }
    }
  }
};
</script>

<style scoped>
</style>
